<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo--入门教程</title>
	<script src="jquery-3.4.1.min.js"></script>
<style type="text/css">
	div{
		width: 100px;height: 100px;
		background: red;
	}

</style>
</head>
<body>
	
	<div id="div1"></div>
	<ul>
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>
	<button id="btn1">增加节点</button>
	

<script type="text/javascript">


//2. on()方法: 多个事件添加一个函数
	// var i=0;
	// $("#div1").on("click mouseover",function(){
	// 	$(this).html(i++)
	// })


//3. on()方法： 不同事件添加不同函数
/*	$("#div1").on({
		click:function(){
			alert("点击")
		},
		mouseover:function(){
			$("#div1").css('background','pink')
		},

		mouseout:function(){
			$("#div1").css('background','blue')
		}
	})
*/


//4. 事件委托
	//点击ul的时候，第二个参数为触发对象(触发对象为选中元素的子节点)
	/*$("ul").on("click",'li',function(){
		$(this).css("background",'orange')
	})

*/


// 5. 新增节点
	$("#btn1").click(function(){
		var i=5
		$(`<li>  ${i++*1111}  </li>`).appendTo($("ul"))
	}) 








</script>


</body>
</html>